<script setup lang="ts">
import { onMounted, ref } from 'vue'

import { shell, type ComponentInstance } from '~/models/Logger'
import HtmlLine from './HtmlLine.vue';

const lines = ref([] as ComponentInstance[])

shell.onLog(log => {
  for (let i = 0; i < log.length - lines.value.length; i++) {
    lines.value.push(log[lines.value.length + i])
    scrollBot()
  }
})

const log = (str: string) => {
  shell.logText(str)
}

const scrollView = ref(null as (null | HTMLElement))
const scrollContent = ref(null as (null | HTMLElement))

const scrollBot = () => {
  const view = scrollView.value!
  const content = scrollContent.value!

  // const y = content.getBoundingClientRect().height - view.getBoundingClientRect().height
  const y = 999999
  
  setTimeout(() => {
    view.scrollTo({
      top: y,
      behavior: 'smooth'
    })
  })
}

onMounted(async () => {
  log('控制台输出')

  window.setTimeout(() => {
    scrollBot()
  }, 1000)
})



</script>

<template>
  <div class="box">
    <MyBar>输出</MyBar>
    <div class="main-wrapper">
      <div ref="scrollView" class="scroll-view color-content">
        <div ref="scrollContent" class="scroll-content">
          <div class="line" v-for="line in lines">
            <HtmlLine v-if="line.component === 'HtmlLine'" :html="line.props.html" :style="line.props.style" />
          </div>
        </div>

      </div>
    </div>

  </div>
</template>

<style scoped lang="scss">
.box {
  width: 100%;
  height: 240px;
  overflow: hidden;
  display: flex;
  flex-flow: column;
  align-items: stretch;
}

.main-wrapper {
  display: flex;
  width: 100%;
  height: calc(100% - 32px);
}

.scroll-view {
  overflow: auto;
  flex-grow: 1;
  height: 100%;

  &>.scroll-content {
    padding: 6px 0;
    width: 100%;
  }
}

.line {
  padding: 0 8px;
  position: relative;
  display: flex;
  // align-items: center;
}

.pre-line {
  position: absolute;
}
</style>
